Questions
3 of 4
1What are HTML entities?
2How do you render < and > in HTML?
3What does &nbsp; do?
4How do you display emojis in HTML?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
03 / 04

What does &nbsp; do?

Understanding the   HTML Entity

  stands for 'non-breaking space' in HTML. It is used to insert a space that will not be collapsed by the browser or cause a line break.

Key Points about &nbsp;
  1. 1

    It creates a space that is preserved in the browser, unlike regular spaces which may be collapsed.

  2. 2

    Useful for formatting content where extra spacing is needed.

  3. 3

    Can be used multiple times to create wider gaps between words or elements.

Example Usage

In short: Use &nbsp; to add a non-breaking space in HTML, which ensures that the space is displayed as intended and prevents automatic line breaks.

Difficulty: 3/10
Topics: Typography, HTML Entities, CSS Layouts

Scenario Questions

0-2 years experience
  1. 1

    We have a pricing badge that displays 'Price: $100'. On mobile screens, the '$100' sometimes wraps to a new line, leaving 'Price:' alone on the first line. How would you fix this in the HTML so they always stay together on the same line?

  2. 2

    You are building a simple contact form and want to put exactly three spaces of visual padding between a label and an input using only HTML, without writing any CSS. How would you achieve this, and why does typing regular spaces in your HTML file not work?

2-5 years experience
  1. 1

    A developer on your team used multiple ' ' entities to align some icons and text in a navigation bar. On smaller viewports, this is causing horizontal scrolling and layout breakage. How would you refactor this component to use modern CSS, and what are the trade-offs of using HTML entities for layout?

  2. 2

    We're pulling dynamic product titles from an external API. Some titles contain multiple ' ' characters, which is causing long titles to overflow their cards instead of wrapping naturally. How would you debug this, and how would you handle this formatting issue programmatically?

5-8 years experience
  1. 1

    We are designing a globalized design system component for rendering localized currencies and physical units (e.g., '10 000 €' in French, '10,000 USD' in English). How would you architect this component to handle non-breaking spaces across different locales, and how do you ensure screen readers don't misinterpret these characters?

  2. 2

    In our React application, we noticed that copy-pasting text containing non-breaking spaces from our UI into external text editors causes search issues for users because the spaces aren't standard spaces. How would you address this usability issue while maintaining the visual layout integrity?

Follow-up Questions

  • ❓How do screen readers typically interpret consecutive non-breaking spaces used for visual layout?
  • ❓Under what circumstances would you prefer the CSS 'white-space' property over hardcoded HTML entities?
  • ❓What happens when a user copies text containing non-breaking spaces from your website and pastes it into a terminal or search bar?